import * as echarts from 'echarts';
import {ref,markRaw,onMounted,onUnmounted} from 'vue'
import type {Ref} from 'vue'
export function UserChart(RefChart:Ref<HTMLElement|null>,setChartData:any){
    const ChartInstance = ref<echarts.ECharts|null>(null)
    const initChart = async()=>{
        if(RefChart.value){
            // 取消vue的响应式
            ChartInstance.value = markRaw(echarts.init(RefChart.value))
            const option = await setChartData()
            ChartInstance.value.setOption(option)
        }
    }
    // 监听页面的变化
    const resizeChart = ()=>{
        ChartInstance.value?.resize()
    }
    onMounted(()=>{
        initChart()
        window.addEventListener('resize',resizeChart)
    })
    onUnmounted(()=>{
        window.removeEventListener('resize',resizeChart)
        if(ChartInstance.value){
            ChartInstance.value.dispose()
        }
    })
}